<template>
  <el-row>
    <el-col :span="11" class="mg-top-8 " style="text-align: center;">
      <span class="expand-button" @click="_openSwitch">
        <img src="./img/open-list.png" />
        全部展开/收起
      </span>

      <el-tree
        ref="orgTree"
        :data="orgData"
        :props="defaultProps"
        default-expand-all
        node-key="id"
        class="menu-list"
        :expand-on-click-node="false"
        @node-click="_handleOrgList"
      />
    </el-col>
    <el-col :span="2"><el-divider direction="vertical" /></el-col>
    <el-col :span="11" class="mg-top-8">
      <el-input
        v-model="getUserListParams.keyword"
        placeholder="请输入关键字"
        suffix-icon="el-icon-search"
        class="search-input"
        @input="keySearch"
      />
      <el-tree
        ref="userTree"
        :data="userData"
        :props="defaultUsersProps"
        :show-checkbox="isMultiSelect"
        node-key="id"
        class="menu-list "
        style="width: 100%;"
        :current-node-key="currentUser.id"
        @check-change="_updateDefaultCheckedUsers"
        @node-click="_handlecurrentUser"
      />
    </el-col>
  </el-row>
</template>

<script>
import { getAllOrg, getUserListByParam } from './api'
import { tree } from '@/utils/tree'

export default {
  props: {
    isMultiSelect: { type: Boolean, default: true },
    selectedUsersList: {
      type: Array,
      default() {
        return []
      },
    },
    selectedUser: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      isOpen: true,
      orgData: [],
      userData: [],
      roleUserFrom: [],
      currentUser: { id: '' },
      getUserListParams: { orgCode: '', keyword: '' },
    }
  },
  computed: {
    defaultProps() {
      return {
        children: 'children',
        label: 'name',
      }
    },
    defaultUsersProps() {
      return {
        children: 'children',
        label: 'account',
      }
    },
  },
  mounted() {
    this.$refs.userTree.setCheckedKeys(
      this.selectedUsersList.map(item => {
        return item.id
      })
    )
  },
  watch: {
    selectedUsersList: {
      deep: true,
      // immediate: true,
      handler(newList) {
        this.$refs.userTree
          ? this.$refs.userTree.setCheckedKeys(
              newList.map(item => {
                return item.id
              })
            )
          : ''
      },
    },
  },
  created() {
    this.roleUserFrom = this.selectedUsersList
    this._getAllOrgTree()
  },
  methods: {
    //清除数据
    clearData() {
      this.$refs.userTree.setCheckedKeys([])
    },
    // 关键字检索
    async keySearch() {
      this.userData = await getUserListByParam(this.getUserListParams)
    },
    // 切换所选用户
    _handlecurrentUser(currentUser) {
      this.currentUser = currentUser
    },
    // 设置
    _updateDefaultCheckedUsers(data, checkStatus) {
      if (checkStatus) {
        this.roleUserFrom.push(data)
      } else {
        this.roleUserFrom = this.roleUserFrom.filter(item => {
          return item.id !== data.id
        })
      }
      this.$emit('getAllNum', this.roleUserFrom.length)
    },
    // 展开/收起按钮
    _openSwitch() {
      this.isOpen = !this.isOpen
      const nodes = this.$refs.orgTree.store._getAllNodes()
      for (const i in nodes) {
        nodes[i].expanded = this.isOpen
      }
    },
    // 过滤节点
    _filterNode(value, data) {
      if (!value) return true
      return data.account.indexOf(value) !== -1
    },
    // 选中组织
    async _handleOrgList(data) {
      this.getUserListParams.orgCode = data.orgCode
      this.userData = await getUserListByParam(this.getUserListParams)
      // this.currentNodeKey = this.currentUser.id
    },
    // 获取组织数据
    async _getAllOrgTree() {
      const Res = await getAllOrg()
      this.orgData = tree(Res)
      this.getUserListParams.orgCode = this.orgData[0].orgCode
      await this._handleOrgList(this.getUserListParams)
    },
    // 获取已选择人员数据
    getSelectedUsersList() {
      return this.roleUserFrom
    },
    // 获取已选择人员数据
    getselectedUser() {
      return this.currentUser
    },
  },
}
</script>

<style lang="scss" scoped>
.menu-list {
  max-height: 45vh;
  margin-top: vh(20px);
  overflow: hidden;

  &:hover {
    overflow: auto;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  transition: background 1s;
}

::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.expand-button {
  display: inline-block;
  padding: vh(10px) vw(20px);
  cursor: pointer;
  border: 1px solid #333;
  border-radius: 4px;
}

.search-input {
  width: vw(178px);
  margin-left: vw(26px);
}

::v-deep {
  .el-input__inner {
    border: 1px solid #333;
  }

  .el-input__inner {
    width: 100% !important;
  }

  .el-button {
    font-size: vw(14px);
  }

  .el-tree-node__label {
    font-size: vw(12px);
  }

  .el-tree-node__content {
    margin: vh(2px) auto;
  }

  .el-divider--vertical {
    height: 51.8vh;
  }
}
</style>
